<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设计模式——门面模式</title>
    <script type="application/javascript" charset="UTF-8" src="../../common/CommonUtils.js"></script>
    <script type="application/javascript" charset="UTF-8">
        /**
         * 门面模式 ： 就是为了简化API接口
         * 最经典的运用就是对于事件的封装 (eg:在CommonUtils.js文件中封装的 EventUtil)
         */

        // 如：做一件事，必须要调用两个函数，分别是a 和 b
        /*function a (x) {
            // do something
        }

        function b (y) {
            // do something
        }

        // 现在将函数a和b组合在一个接口中
        // 这就是最简单的门面模式
        function ab (x,y) {
            a(x);
            b(y);
        }*/

        // 有一个需求：获取页面上的元素，并且为获取的元素设置样式
        window.onload = function () {
            // 获取页面元素
            /*var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            var div3 = document.getElementById('div3');

            div1.style.color = 'red';
            div2.style.color = 'red';
            div3.style.color = 'red';*/

            // 上面代码，明显的存在了冗余
            // 可以将设置页面元素样式的方法封装成API
            // 也就是最简单的门面模式的应用

            // setStyle(['div1','div2','div3'],'background', 'blue');

            setCss(['div1','div2','div3'],{
                color : 'red',
                background : 'black',
                fontSize : '26px'
            });
        };

        function setStyle (elementsId, attr, val) {
            for (var i = 0; i < elementsId.length; i++) {
                document.getElementById(elementsId[i]).style[attr] = val;
            }
        }

        function setCss (elementsId, options) {
            for (var attr in options) {
                if (options.hasOwnProperty(attr)) {
                    setStyle(elementsId,attr,options[attr]);
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">我是div1</div>
    <div id="div2">我是div2</div>
    <div id="div3">我是div3</div>
</body>
</html>